<template>
  <div class="api">
    <div v-if="title" class="a-title">{{title}}</div>
    <div v-if="title" class="a-line"></div>
    <hr />
    <div class="a-test-button rx_no_select" :class="{'extend': extend}" @click="onExtend">测试接口</div>
    <div v-if="extend">
      <api-run :method="getMethod" :url="url" :params="params" />
    </div>
    <div class="a-line"></div>
    <hr />
    <div class="a-line"></div>
    <div class="api-space">
        <div>请求地址: {{url}}</div>
      </div>
    <div class="api-docs">
      <div v-if="tagDesc"  class="ad-tag-desc">{{tagDesc}}</div>
      <div class="ad-tag">
        <div id="method" class="item method rx_no_select">{{getMethod}}</div>
        <div v-for="(item,index) in tags" :key="'tags-'+index" class="item rx_no_select">{{item}}</div>
      </div>
      <hr />
      <div class="api-space">
        <div>请求地址</div>
        <api-url-select />
      </div>
      <div class="api-space">
        <div>请求参数</div>
        <api-params :params="params" />
      </div>
      <div class="api-space">
        <div>响应数据</div>
        <api-params :params="response" />
      </div>
      <div class="api-space">
        <div>响应例子</div>
        <api-result :resopnse="result" />
      </div>
    </div>
  </div>
</template>

<script>
import ApiRun from './api-run'
import ApiUrlSelect from './api-url-select'
import ApiParams from './api-params'
import ApiResult from './api-result'

export default {
  components: { ApiRun, ApiUrlSelect, ApiParams, ApiResult },
  props: {
    url: { type: String, default: '', required: true, },
    title: { type: String, default: '' },
    tagDesc: { type: String, default: '' },
    method: {
      type: String,
      default: 'GET',
      validator(value) {
        value = value || 'GET'
        const newValue = value.toUpperCase()
        return ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'].indexOf(newValue) !== -1
      }
    },
    tags: { type: Array, default() { return [] } },
    params: { type: Array, default() { return [] } },
    response: { type: Array, default() { return [] }, required: true, },
    result: { type: Object, default() { return [] }},
  },
  data() {
    return {
      extend: false,
    };
  },
  computed: {
    getMethod() {
      let method = this.method
      if (method) {
        method = method.toUpperCase()
      }
      return method
    }
  },
  methods: {
    onExtend() {
      this.extend = !this.extend
    }
  }
};
</script>

<style src="../css-component/style.css"></style>
<style scoped>
.api .a-title {
  font-size: 20px;
  margin-bottom: 20px;
}
.api .a-line {
  height: 1px;
  background-color: #ccc;
}

.api .a-test-button {
  margin: 20px 0;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  background-color: var(--color-gray);
  color: white;
  text-align: center;
  cursor: pointer;
}
.api .a-test-button.extend {
  background-color: var(--color-blue);
}

.api .api-docs {
  margin-top: 20px;
}

.api .api-docs .ad-tag-desc {
  font-size: 12px;
  color: var(--color-gray);
  margin-bottom: 10px;
}

.api .api-docs .ad-tag {
  display: flex;
  align-content: center;
  flex-direction: row;
  margin-bottom: 20px;
}

.api .api-docs .ad-tag .item.method  {
  background-color: var(--color-blue);
}
.api .api-docs .ad-tag .item {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  height: 24px;
  padding: 0 20px;
  line-height: 24px;
  border-radius: 12px;
  background-color: var(--color-orange);
  color: white;
  cursor: pointer;
}

.api .api-space {
  margin-top: 30px;
  font-size: 24px;
  font-weight: bold;
}
</style>
